<template>
	<view class="matching" v-if="show">
		<view class="head">
			<view class="title">{{tip}}</view>
			<view class="time">{{time}}</view>
			<view class="wait">等待时间</view>
		</view>

		<view class="pk">
			<view class="left">
				<view class="avatar">
					<image
						src=""
						mode=""></image>
				</view>
				<view class="name">
					空空如也
				</view>
				<view class="title">
					挑战者
				</view>
			</view>
			<view class="center">
				<image v-if="!beforStart"
					src=""
					mode=""></image>
				<text v-else>等待对手加入</text>
			</view>
			<view class="left right">
				<view class="avatar">
					<image src="matchUser.avatar" mode=""></image>
				</view>
				<view class="name">
					{{matchUser.nickname}}
				</view>
			</view>
		</view>

		<button type="default" class="btn" :class="{'startBtn' : !beforStart}" @click="submit">{{btnTitle}}</button>

		<view class="footer">
			剩余挑战次数：20次,共5回合
			<view>每题10秒回答时间</view>
		</view>
		<my-confirm :show="showC" v-on:confirmClick="confirmClick"/>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		props: ['show'],
		data() {
			return {
				timmer: null,
				time: 0,
				tip: '正在匹配对手',
				isDone: false,
				btnTitle: '放弃',
				showC:false
			}
		},
		computed: {
			...mapState({
				matchUser: (state) => state.matchUser,
				beforStart: (state) => state.beforStart,
			}),
		},
		watch: {
			beforStart(value){
				if(value){
					this.btnAnimimate()
				}
			}
		},
		methods: {
			submit() {
				if(!this.beforStart){
					
				}else{
					this.showC=true
				}
			},
			confirmClick(value){
				if(value){
					this.$store.commit('show_Room',false);
				}else{
					
				}
				this.showC=false
			},
			btnAnimimate(){
				let btnCount=3
				let timmer =setInterval(()=>{
					if(btnCount==-1){
						this.btnTitle="马上开始"
						clearInterval(timmer)
						return
					}
					this.btnTitle="马上开始"+btnCount--
				},1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.matching {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 1206rpx;
		z-index: 198903060;
		padding: 0 92rpx;
		background-image: url("https://ftp.bmp.ovh/imgs/2021/05/009b9ac6a0e4fda0.png");
		background-size: 100% 100%;
	}

	.head {
		display: flex;
		flex-direction: column;
		margin: 85rpx auto 0;
		width: 300rpx;
		height: 140rpx;

		.title {
			flex: 1;
			text-align: center;
			height: 47rpx;
			font-size: 48rpx;
			font-weight: 800;
			color: #E4615C;
			line-height: 50rpx;
		}

		.time {
			flex: 1;
			text-align: center;
			height: 31rpx;
			font-size: 40rpx;
			font-weight: 400;
			color: #333333;
		}

		.wait {
			flex: 1;
			text-align: center;
			height: 23rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
			line-height: 60rpx;
		}
	}
	
	.startBtn{
		border: none !important;
		background: linear-gradient(0deg, #E4615C 0%, #FB9693 100%);
	}

	.pk {
		position: relative;
		margin-top: 70rpx;
		height: 282rpx;

		.left {
			float: left;
			height: 100%;
			width: 143rpx;

			.avatar {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 143rpx;
				height: 143rpx;
				border: 8rpx solid #E4615C;
				border-radius: 50%;

				image {
					width: 121rpx;
					height: 121rpx;
					background: #FFFFFF;
					border-radius: 50%;
				}
			}

			.name {
				text-align: center;
				height: 29rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #E4615C;
				line-height: 88rpx;
			}

			.title {
				position: absolute;
				bottom: 0;
				text-align: center;
				width: 145rpx;
				height: 42rpx;
				background: #E4615C;
				border-radius: 21rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.center {
			display: flex;
			align-items: center;
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			height: 143rpx;
			width: 193rpx;


			image {
				height: 69rpx;
				width: 193rpx;
			}

			text {
				width: 193rpx;
				display: block;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				font-style: italic;
				color: #E4615C;
			}
		}

		.right {
			float: right;
		}
	}


	.btn {
		margin-top: 143rpx;
		height: 105rpx;
		border: 5rpx solid #834340;
		border-radius: 50rpx;
		font-size: 48rpx;
		font-weight: bold;
		color: #834340 !important;
		line-height: 88rpx;
	}

	.footer {
		margin: 160rpx auto 0;

		text-align: center;
		width: 427rpx;
		height: 99rpx;
		font-size: 32rpx;
		font-weight: bold;
		font-style: italic;
		color: #E4615C;
	}
</style>
